<template>
	<div class="box">
		<!-- 头部搜索模块 -->
		<headerSearch 
      :selectObj="selectObject" 
      :goSearchFc="searchClick" 
      :buttonList="buttonList"
    />
		<!-- 中间表格模块 -->
        <BaseTable
            :data="instructionData"
            :columns="instructionDataColumns"
            :tableHeight="tableHeight"
            :pagination="false"
            :loading="loading"
            @details="tableClick"
        ></BaseTable>

		<div class="page">
			<el-pagination
				background
				@size-change="handleSizeChange"
				@current-change="handleCurrentChange"
				:current-page="queryAll.startpage"
				:page-sizes="[10, 15, 20, 25, 30]"
				:page-size="queryAll.pagesize"
				layout="total, sizes, prev, pager, next, jumper"
				:total="totalNum"
			></el-pagination>
		</div>


		<!-- 核 销 (普通作业过程)-->
		<el-drawer
			:before-close="handleClose"
			title="指令核销"
			:visible.sync="drawerInstruction"
			direction="rtl"
			size="50%"
		>
      <instructionDetail  ref="instructionDetail" />
			<div class="demo-drawer__footer" v-if="!isGet">
				<el-button type="primary" @click="submitInner()" size="mini" v-if="!isGet">核 销</el-button>
        <el-button size="mini" @click="drawerInstruction = false">取消</el-button>
			</div>
		</el-drawer>       

    <!-- 核 销 (加水接电特殊作业过程)-->
		<el-drawer
			:before-close="handleClose"
			title="指令核销"
			:visible.sync="drawerInstructionS"
			direction="rtl"
			size="50%"
		>
      <instructionDetailS  ref="instructionDetailS" />
			<div class="demo-drawer__footer" v-if="!isGet">
				<el-button type="primary" @click="submitInner()" size="mini" v-if="!isGet">核 销</el-button>
        <el-button size="mini" @click="drawerInstructionS = false">取消</el-button>
			</div>
		</el-drawer>                         
	</div>
</template>

<script>
import Utils from '@/libs/Utils.js'
import BaseTable from '@/components/BaseTable'
import api from '@/api/yardTally/InstructionWriteoff/index'
import headerSearch from '@/components/headerSearch'
import instructionDetail from './instructionDetail.vue'
import instructionDetailS from './instructionDetailS.vue'
export default {
  name: 'instructionWriteoff',
  components: {
    BaseTable,
    headerSearch,
    instructionDetail,
    instructionDetailS
  },
  data() {
    return {
      // 搜索框显示对象
      selectObject: [
        {
          name: '指令编号',
          type: 'input',
          modelName: 'trustNo'
        },
        {
          name: '状态',
          type: 'select',
          modelName: 'status',
          selectData: [
            { label: '作业中', value: '4' },
            { label: '核销', value: '5' }
          ],
          selectLabel: 'label',
          selectValue: 'value'
        }
      ],
      // header的按钮list
      buttonList: [
        { label: '指令核销', type: 'primary', icon: '', disabled: true, click: () => this.instructionWriteOff, permission: 'tallyManagement:instructionWriteoff:writeOff' },
        { label: '撤销核销', type: 'primary', icon: '', disabled: true, click: () => this.revoke, permission: 'tallyManagement:instructionWriteoff:revoke' }
      ],
      instructionDataColumns: [ // table表头
        { prop: 'companyName', label: '组织', width: 50, isShort: true },
        { prop: 'shipvoyageName', label: '船名航次', width: 150, render: (h, params) => {
          return h(
            'div',
            [
              h('span', {
                props: {
                  size: 'mini'
                },

                domProps: {
                  // 添加标签,使用自己引入的iconfont图标
                  innerHTML:
											`<span style='color:#0B6CD6;cursor:pointer'><span  style='padding-left:5px;'>${params.row.shipvoyageName}</span></span>`
                },
                on: {
                  click: () => {
                    this.getDetail(params.row)
                  }
                }
              })
            ]
          )
        } },
        { prop: 'trustNo', label: '指令编号', width: 120 },
        { prop: 'tradeType', label: '贸别' },
        { prop: 'processName', label: '作业过程' },
        { prop: 'cargoCategoryName', label: '货种' },
        { prop: 'planQuantity', label: '计划件数' },
        { prop: 'planTon', label: '计划重量' },
        { prop: 'planVolume', label: '计划体积' },
        { prop: 'checkQuantity', label: '实际件数' },
        { prop: 'checkTon', label: '实际重量' },
        { prop: 'checkVolume', label: '实际体积' },
        { prop: 'createdTime', label: '指令日期', width: 130 },
        { prop: 'releaseName', label: '发布人' },
        { prop: 'releaseTime', label: '发布时间', width: 130 },
        { prop: 'checkName', label: '核销人' },
        { prop: 'checkTime', label: '核销时间', width: 130 },
        { prop: 'remark', label: '作业要求' },
        { prop: 'status', label: '状态', fixed: 'right',
          render(h, params) {
            if (params.row.status === 1) {
              return h('el-tag', {
                props: {
                  size: 'mini'
                },
                domProps: {
                  innerHTML: '已申请'
                }
              })
            } else if (params.row.status === 2) {
              return h('el-tag', {
                props: {
                  size: 'mini',
                  type: 'info'
                },
                domProps: {
                  innerHTML: '审核中'
                }
              })
            } else if (params.row.status === 3) {
              return h('el-tag', {
                props: {
                  size: 'mini',
                  type: 'success'
                },
                domProps: {
                  innerHTML: '已发布'
                }
              })
            } else if (params.row.status === 4) {
              return h('el-tag', {
                props: {
                  size: 'mini',
                  type: 'warning'
                },
                domProps: {
                  innerHTML: '作业中'
                }
              })
            } else if (params.row.status === 5) {
              return h('el-tag', {
                props: {
                  size: 'mini',
                  type: 'danger'
                },
                domProps: {
                  innerHTML: '核销'
                }
              })
            }
          }
        }
      ],
      instructionData: [],
      activeName: 'first',
      loading: false,
      queryAll: {
        startpage: 1,
        pagesize: 10,
        writeOff: 'Y'
      },
      totalNum: 0,
      drawerInstruction: false,
      drawerInstructionS: false, // 特殊作业过程指令核销
      clickRow: {},
      isGet: false // 是否查看状态
    }
  },
  computed: {
    tableHeight: function() {
      return this.$store.state.tableHeight - 40
    }
  },
  methods: {
    /**
     * 获取指令主列表
     */
    async getOperationList() {
      this.loading = true
      await api
        .reqGetOperation(this.queryAll)
        .then(res => {
          this.loading = false
          this.buttonList[0].disabled = true
          this.buttonList[1].disabled = true
          this.instructionData = res.data.data.pages
          this.queryAll.startpage = res.data.data.pageNum
          this.queryAll.pagesize = res.data.data.pageSize
          this.totalNum = res.data.data.totalNum
        })
        .catch(() => {})
    },

    /**
     * 打开指令核销
     */
    async instructionWriteOff(row) {
      if ((row ? row.isPlan : '' || this.clickRow.isPlan) === 'Y') {
        this.drawerInstruction = true
        this.isGet = false
        this.$nextTick(() => { // 获取结算信息赋值
          this.$refs.instructionDetail.$refs.myTable.clearSelection();
          setTimeout(() => {
            api.reqEditOperation(this.clickRow.id, this.clickRow.isPlan).then(res => {
              this.$refs.instructionDetail.formData = res.data.data
              res.data.data.yardTicketListSum.forEach(item => {
                if (item.isWriteOff !== null) {
                  this.$refs.instructionDetail.changeSelect(item)
                }
              })
            })
          })
        }, 100);
      } else {
        this.drawerInstructionS = true
        this.isGet = false
        this.$nextTick(() => { // 获取结算信息赋值
          if (this.clickRow.processCode === 'XUNZHENG' || this.clickRow.processCode === 'FENXUAN') {
            this.$refs.instructionDetailS.tableColumn = [ // table表头
              { prop: 'processName', label: '作业内容' },
              { prop: 'cargoOwnerName', label: '货主' },
              { prop: 'cargoAgentName', label: '货代' },
              { prop: 'cargoName', label: '货名' },
              { prop: 'issuingCompanyName', label: '开证公司' },
              {
                prop: 'checkNumber',
                label: '作业量',
                render: (h, params) => {
                  return h(
                    'div',
                    [
                      h('el-input', {
                        props: {
                          value: params.row.checkNumber,
                          type: 'text',
                          size: 'mini',
                          placeholder: '请输入'
                        },
                        on: {
                          input: e => {
                            console.log(e)
                            this.$set(this.$refs.instructionDetailS.formData.yardTicketListSum[params.row.index], 'checkNumber', e)
                          }
                        }
                      })
                    ])
                }
              }
            ]
          }
          setTimeout(() => {
            api.reqEditOperation(this.clickRow.id, this.clickRow.processType).then(res => {
              this.$refs.instructionDetailS.formData = res.data.data
            })
          })
        }, 100);
      }
    },

    /**
     * 指令核销
     */
    async submitInner() {
      if (this.clickRow.processType === '1') {
        const obj = JSON.parse(JSON.stringify(this.$refs.instructionDetail.selectRow))
        if (obj.length === 0) {
          this.$message.warning('请确认核销数量')
          return
        }
      }
      const params = this.clickRow.processType === '1' ? JSON.parse(JSON.stringify(this.$refs.instructionDetail.formData)) : JSON.parse(JSON.stringify(this.$refs.instructionDetailS.formData))
      const res = await api.reqSaveOperation(params)
      if (res.data.code === '0000') {
        this.$message.success('核销成功')
        this.clickRow.processType === '1' ? this.drawerInstruction = false : this.drawerInstructionS = false
        this.getOperationList()
      }
    },
    /**
     * 撤销核销
     */
    async revoke() {
      const res = await api.reqRevokeList(this.clickRow.id)
      if (res.data.code === '0000') {
        this.$message.success('撤销成功')
        this.getOperationList()
      }
    },

    /**
     * 获取行信息
     */
    tableClick(row) {
      this.buttonList[0].disabled = true
      this.buttonList[1].disabled = true
      this.clickRow = row
      if (row.status !== 5) {
        this.buttonList[0].disabled = false
      } else {
        this.buttonList[1].disabled = false
      }
    },
    /**
       * 查询结算页面
       */
    getDetail(row) {
      this.instructionWriteOff(row)
      this.isGet = row.status === 5
    },
    handleSizeChange(val) {
      this.queryAll.pagesize = val
      this.getOperationList()
    },
    handleCurrentChange(val) {
      this.queryAll.startpage = val
      this.getOperationList()
    },
    searchClick(searchData) {
      this.queryAll.startpage = 1
      this.queryAll = Object.assign(this.queryAll, searchData)
      this.getOperationList()
    },

    handleClose(done) {
      const oldV = {}
      const newV = {}
      if (!Utils.compareData(oldV, newV)) {
        this.$confirm('修改的数据未保存，是否关闭？')
          .then(_ => {
            done()
          })
          .catch(_ => {})
      } else {
        done()
      }
    }
  }
}
</script>

<style lang="less" scoped>
.selectBox {
	justify-content: space-between;
	display: flex;
	background: #ffffff;
	border: 1px solid #e1e4eb;
	border-bottom: 0;
	border-left: none;
	height: 50px;
	position: relative;
	align-items: center;
	padding-left: 14px;
	padding-right: 20px;
}
.input_box {
	display: flex;
}
.page {
	background: #ffffff;
	text-align: right;
	border-radius: 0 0 4px 4px;
	padding: 5px 20px;
}
/deep/.el-tabs--border-card > .el-tabs__content {
	padding: 0 !important;
}
//抽屉底部样式
/deep/ .el-drawer__header {
	margin-bottom: 0;
	padding: 16px;
	border-bottom: 1px solid gainsboro;
}
.demo-drawer__footer {
	text-align: right;
	padding-right: 20px;
	border-top: 1px solid #c8cfde;
	background-color: #f5f7fa;
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	line-height: 50px;
}
.box {
	background: #ffffff;
	border: 1px solid #e1e4eb;
	border-radius: 4px 4px 0 0;
	border-top: none;
}
</style>
